<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加小说</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
</head>
<body>


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">

  <div class="layui-form-item">
    <label class="layui-form-label">小说名</label>
    <div class="layui-input-block">
      <input type="text" name="title" required lay-verify="required|title" autocomplete="off" class="layui-input"
             placeholder="" value="">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">作者</label>
    <div class="layui-input-block">
      <input type="text" name="author" lay-verify="required|title" placeholder="请输入" autocomplete="off" class="layui-input" value="">
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">封面图片</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" id="cover">
        <div id="cover_head">
          <i class="layui-icon"></i>
          <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div class="layui-hide" id="uploadDemoView">
          <img src="" alt="上传成功后渲染" style="max-width: 128px;width: 128px;">
          <input type="hidden" name="cover" value="">
        </div>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">主角名</label>
    <div class="layui-input-block">
      <input type="text" name="lead"  lay-verify="title" autocomplete="off" class="layui-input"
             placeholder="多个猪脚逗号分隔" value="">
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">上架状态</label>
    <div class="layui-input-block">
      <input type="radio" name="in_shelf" value="1" title="上架" checked>
      <input type="radio" name="in_shelf" value="2" title="下架">
      <input type="radio" name="in_shelf" value="0" title="绝对下架">
    </div>
    <div class="layui-form-mid layui-word-aux">
      下架：读者书架照常展示，其他推荐位隐藏
      <br>
      绝对下架：所有推荐位都不展示
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">更新状态</label>
    <div class="layui-input-block">
      <select name="update_status" lay-verify="required">
        <option value="0">连载</option>
        <option value="1">完结</option>
        <option value="2">弃更</option>
      </select>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">书籍评级</label>
    <div class="layui-input-block">
        <select name="scale"  lay-verify="required" >
          <option value="C">C级别</option>
          <option value="B">B级别</option>
          <option value="A">A级别</option>
          <option value="S">S级别</option>
        </select>
      <div class="layui-inline">
        <div class="layui-form-mid layui-word-aux">从C级别到S级评级依次递增</div>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">千字/书币</label>
      <div class="layui-input-inline">
        <input type="number" name="words_fee" lay-verify="required" autocomplete="off" class="layui-input" value="50">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">频道分类</label>
    <div class="layui-input-block">
      <div class="layui-inline">
        <select name="freq_id" id="freq_id" lay-verify="required" lay-filter="freq">
          <option value="">请选择频道</option>
          {foreach $freq as $k => $v}
          <option value="{$v.id}">{$v.name}</option>
          {/foreach}
        </select>
      </div>
      <div class="layui-inline">
        <select name="class_id" id="class_id"  lay-verify="required"  lay-filter="class" id="class_id" lay-search>
          <option value="">请选择分类</option>
          {foreach $freq as $k => $v}
            {foreach $v.sonClass as $i}
              <option value="{$i.id}">{$i.name}</option>
            {/foreach}
          {/foreach}
        </select>
      </div>
    </div>
  </div>



  <div class="layui-form-item">
    <label class="layui-form-label">子分类</label>
    <div class="layui-input-block">
      <div class="layui-inline">
        <select name="son_class_id" id="son_class_id" lay-verify="required" lay-search>
          <option value="">请选择子分类</option>
        </select>
      </div>
      <div class="layui-inline">
        <div class="layui-form-mid layui-word-aux">前台子标签</div>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">后台标签</label>
    <div class="layui-input-block">
      {foreach $labels as $k => $v}
      <input type="checkbox" name="label[]" title="{$v.name}" value="{$v.id}">
      {/foreach}
    </div>
  </div>


  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">简介</label>
    <div class="layui-input-block">
      <textarea name="brief" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item layui-hide">
    <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
  </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'laydate'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,layer = layui.layer
            ,form = layui.form
            ,upload = layui.upload;


    form.on('select(freq)', function (data) {
      var freqJson = '{$freqJson}';
      var freq = JSON.parse(HTMLDecode(freqJson));
      var class_id = $("#class_id").val();
      if (data.value === '') {
        var html = "<option value=''>请选择分类</option>";
        for (var i = 0, l = freq.length; i < l; i++) {
          for (var x = 0, y = freq[i]['sonClass'].length; x < y; x++) {
            if (freq[i]['sonClass'][x]['id'] == class_id){
              html += "<option value='" + freq[i]['sonClass'][x]['id'] + "' selected>" + freq[i]['sonClass'][x]['name'] + "</option>";
            }else {
              html += "<option value='" + freq[i]['sonClass'][x]['id'] + "'>" + freq[i]['sonClass'][x]['name'] + "</option>";
            }
          }
          $("#class_id").html(html);
          form.render();
        }
      }else {
        for (var i = 0, l = freq.length; i < l; i++) {
          if (freq[i]['id'] == data.value) {
            var html = "<option value=''>请选择分类</option>";
            for (var x = 0, y = freq[i]['sonClass'].length; x < y; x++) {
              if (freq[i]['sonClass'][x]['id'] == class_id){
                html += "<option value='" + freq[i]['sonClass'][x]['id'] + "' selected>" + freq[i]['sonClass'][x]['name'] + "</option>";
              }else {
                html += "<option value='" + freq[i]['sonClass'][x]['id'] + "'>" + freq[i]['sonClass'][x]['name'] + "</option>";
              }
            }
            $("#class_id").html(html);
            form.render();
          }
        }
      }
      getSelectClassSon();
    });


    //拖拽上传
    upload.render({
      elem: '#cover'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      ,done: function(res){
        if (res.code !== 0){
          layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.picUrl);
          layui.$('#uploadDemoView').find('input').val(res.data.filePath);
          layui.$('#cover_head').addClass('layui-hide');
          console.log(res)
        }else {
          layer.msg(res.msg);
        }
      }
    });


    /* 自定义验证规则 */
    form.verify({
      title: function(value){
        if(value.length > 40){
         // return '字数过长';
        }
      }
    });

    function HTMLDecode(text) {
      var temp = document.createElement("em");
      temp.innerHTML = text;
      var output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    }




    form.on('select(class)', function (data) {
      getSelectClassSon();
    });

    function getSelectClassSon(){

      var freqId = $("#freq_id").val();
      var classId = $("#class_id").val();
      admin.req({
        url: '/novel/getSelectClassSon'
        , type: "POST"
        , data: {'freq_id': freqId, 'class_id': classId}
        , done: function (res) {
          var select = document.getElementById("son_class_id");
          select.options.length = 0;

          var option = document.createElement("option");
          option.value = '';
          option.text = '请选择子分类'
          select.appendChild(option);
          for (var i = 0; i < res.data.length; i++) {
            var option = document.createElement("option");
            option.value = res.data[i].id;
            option.text = res.data[i].name;
            select.appendChild(option);
          }
          form.render();
        }, not_finish: function (res) {
          layer.msg(res.msg);
        }
      });



    }


  });
</script>
</body>
</html>
